<template>
	<div>
		<div class="publish-top">
			<div class="left-icon" @click="tabReturn">
				<img src="../../../assets/images/left.png"/>
			</div>
			<p>回复</p>
		</div>
		<div class="reply-txt">
			<p :id="replayData.comment_id">{{replayData.user_nickname}}：{{replayData.comment_desc}}</p>
			<ul>
				<li v-for="item in replyComment">
					<span>{{item.user_nickname}}</span>回复<span>{{replayData.user_nickname}}</span>：{{item.comment_desc}}
				</li>
			</ul>
		</div>
		<div class="comm-replay" v-if="isHideComm">				
			<div class="replay-inp">
				<input type="text" v-model="repVal" placeholder="回复" v-focus="isfocus" @blur="onBlurent"/>
				<button :class="repVal !==''?'active':''" @click="onBtnout">发送</button>
			</div>
		</div>
	</div>
</template>

<script>
	import axios from "axios";
	import user from '@/utils/isLogin';
	import qs from 'qs';
	export default{
		data(){
			return{
				repVal:'',
				isfocus:false,
				isHideComm:false,
				replayData:{},
				replyComment:[]
			}
		},
		directives: {
		   focus: {
	         inserted: function (el) {
            	el.focus();
	         }
		   }
		},
		components:{
			
		},
		created(){
			var replyCurr = plus.webview.currentWebview();
			
			var data = qs.stringify({
			   commentId:replyCurr.articleId,
			})
			axios({
			   method: 'post',
			   url: user.src + '/index/comment/reply_to_comment_list',
			   data:data
			})
			.then((res) => {
				if(res.data.status == 200){
					this.replayData = res.data.data[0];
					this.replyComment = res.data.data.reply_comment;
				}
			})
			.catch((error)=> {
			    console.log(error);
			});
			
			let plusReady = ()=>{
				
			};
			if(window.plus){
				plusReady();
			}else{
				document.addEventListener("plusready", plusReady, false);
			}
		},
		methods:{
			//关闭当前窗口
			tabReturn(){
				var currentPage = plus.webview.currentWebview();
				plus.webview.close(currentPage);
			},
			onReplyName(){		
				this.isfocus = true;
				this.isHideComm  = true;
			},
			onBlurent(){
				if(this.repVal == ''){
					this.isfocus = !this.isfocus;
					this.isHideComm  = !this.isHideComm;
				}else{
					return;
				}
			},
			onBtnout(){
				this.isfocus = !this.isfocus;
				this.isHideComm  = !this.isHideComm;
				this.repVal = '';
			}
		}
	}
</script>

<style lang="less">
	html,body{
		padding: 0;
		margin: 0;
		width: 100%;
		height: 100%;
	}
	*{
		margin: 0;
		padding: 0;
	}
	ul,li{
		list-style: none;
	}
	.publish-top{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 60px;
		background:@default-blue;
		box-shadow: 0px 0px 8px 1px #999;
		padding-top: 70px;
		display:flex;		
		.left-icon{
			width: 90px;
			
			img{
				width: 15px;
				height: 26px;
				margin-left: 31px;
			}
		}
		p{	
			width: 75%;	
			color: #fff;
			font-size: 28px;
			text-align: center;
		}
	}
	.reply-txt{
		padding: 130px 30px 0;
		p{
			padding: 20px 0;
			border-bottom: 0.1rem solid #f1f1f1;
			font-size: 24px;
		}
		ul{
			li{
				padding: 20px 0;
				border-bottom: 0.1rem solid #f1f1f1;
				font-size: 24px;
				span{
					color: #008bff;
				}
			}
		}
	}
	.comm-replay{	
		position: fixed;
		bottom: 0;
		left: 0;	
		width:100%;
		height: 95px;
		border-top:0.1rem solid #f5f5f5;
		padding: 0 30px;	
		display: flex;
		align-items: center;		
		.replay-inp{
			border: 0.1rem solid #d3d3d3;
			display: flex;
			align-items: center;
			input{
				width: 540px;
				height: 59px;
				border: 0;
				outline: none;
				font-size: 24px;
				background: #f5f5f5;
				padding-left:20px ;
			}
			button{
				width: 100px;
				border: 0;
				outline: none;
				height: 59px;
			}
			.active{
				background: #3b8fb4;
				color: #fff;
			}
		}
	}
</style>